
<template>
  <div>
    <span>用go.js创建一个空图</span>
    <div id="myDiagramDiv1" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

    <el-divider></el-divider>

    <span>图 和 模型</span>
    <span>模型就是数据，模型有很多种</span>
    <ul>
      <li>go.Model：纯节点</li>
      <li>go.GraphLinksModel：关系模型，节点和链接。关系模型的节点可以任意建立链接</li>
      <li>go.TreeModel：树模型节点，树模型的节点不能任意建立链接</li>
    </ul>

    <span>默认创建就有很多交互的功能</span>
    <ul>
      <li>单击并拖动上图中的背景以平移视图。</li>
      <li>单击某个节点以将其选中，或按下并拖动节点以将其移动。</li>
      <li>若要创建选择框，请单击并按住背景，然后开始拖动。</li>
      <li>按 Delete 键删除选定的节点。</li>
      <li>使用 Ctrl-C 和 Ctrl-V 或 control-drag-and-drop 来创建所选内容的副本。</li>
      <li>在触摸设备上，按住以显示上下文菜单。</li>
      <li>由于启用了撤消管理器，因此 Ctrl-Z 和 Ctrl-Y 将撤消和重做移动以及复制和删除。</li>
    </ul>
    <div id="myDiagramDiv2" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

    <el-divider></el-divider>

    所有在Diagram上的元素都称为GraphObjects，GraphObjects有很多种，常见的有
    - 形状，用于显示带有颜色的预定义或自定义几何图形
    - 文本块，以各种字体显示（可能可编辑）文本
    - 图片，用于显示图像，包括 SVG 文件
    - 面板/容器，用于容纳其他对象的集合的容器，这些对象可以根据面板的类型以不同的方式定位和调整大小（如桌子、垂直堆叠和拉伸容器）

    文本块、形状和图片是 GoJS 的原始构建基块。文本块不能包含图像;形状不能包含文本。
    如果想一个节点既有文字，又有头像，估计得用“容器”类型的节点

    <el-divider></el-divider>

    <span>一个节点可以由多个graphObject组成：形状 + 文字</span>
    <div id="myDiagramDiv3" style="width:800px; height:400px; background-color: #DAE4E4;"></div>

    <!-- 已经看完file:///C:/Users/wyl/Desktop/site/learn/index.html的getStart -->

  </div>
</template>

<script>
/* eslint-disable no-undef */
import "@/lib/gojs/go.js" // 引入go.js
export default {
  mounted () {
    // 用go.js创建一个空图
    const myDiagram1 = new go.Diagram("myDiagramDiv1");

    // 图 和 模型
    const myDiagram2 =
      new go.Diagram("myDiagramDiv2",
        { // enable Ctrl-Z to undo and Ctrl-Y to redo
          "undoManager.isEnabled": true
        });
    myDiagram2.model = new go.Model(
      [
        // 数组里的每个对象都会在Diagram图中创建一个节点来代表它
        { key: "Alpha", chineseName: "张三" },
        { key: "Beta", chineseName: "李四" },
        { key: "Gamma", chineseName: "王五" }
      ]);
    myDiagram2.nodeTemplate = new go.Node().add(new go.TextBlock().bind("text", "chineseName")) // node作为文本块，并且取nodeData的chineseName


    // 文字+图片：一个节点可以由多个graphObject组成：形状 + 文字
    const myDiagram3 =
      new go.Diagram("myDiagramDiv3",
        { // enable Ctrl-Z to undo and Ctrl-Y to redo
          "undoManager.isEnabled": true
        });
    myDiagram3.model = new go.Model(
      [
        // 数组里的每个对象都会在Diagram图中创建一个节点来代表它
        { key: "Alpha", text: "张三", loc: "center", fig: 1 },
        { key: "Beta", text: "李四", loc: "left", fig: 4 },
        { key: "Gamma", text: "王五", loc: "right", fig: 5 }
      ]);
    myDiagram3.nodeTemplate = new go.Node("Horizontal", // 节点中graphObject的排列方向，Horizontal水平；Vertical垂直
      {
        locationSpot: go.Spot.Center
      })
      .bind("location", "loc")
      //  this Shape will be vertically above the TextBlock 
      .add(new go.Shape("RoundedRectangle", // 字符串参数可以命名一个预定义的图形
        { /* set Shape properties here */ })
        // example Shape binding sets Shape.figure to the value of Node.data.fig
        .bind("figure", "fig")) // 这个是什么意思？
      // add the next GraphObject to the Node:
      .add(new go.TextBlock("default text",  // string argument can be initial text string
        { /* set TextBlock properties here */ })
        .bind("text")); // 如果nodeData和属性名一样，可以简写，即dataNode.text绑定到节点的text属性

  }

}
</script>

<style>
</style>